<template>
  <div>
    <h3>查询条件</h3>
    <el-form
      ref="searchForm"
      :model="searchForm"
      label-width="100px"
      class="demo-ruleForm"
      :inline="true"
    >
      <el-form-item label="文章标题：" prop="title">
        <el-input v-model="searchForm.title" placeholder="文章标题"></el-input>
      </el-form-item>

      <el-form-item label="编辑：" prop="maName">
        <el-select v-model="searchForm.maName" placeholder="编辑">
          <el-option label="全部" value=""></el-option>
          <el-option label="maName" value="name1"></el-option>
          <el-option label="maName" value="name2"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="状态：" prop="stateId">
        <el-select v-model="searchForm.stateId" placeholder="状态">
          <el-option label="全部" value="0"></el-option>
          <el-option label="已发布" value="1"></el-option>
          <el-option label="审核中" value="2"></el-option>
          <el-option label="未通过" value="3"></el-option>
          <el-option label="草稿" value="4"></el-option>
          <el-option label="已下架" value="5"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm()">提交</el-button>
        <el-button @click="resetForm('searchForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    props: {
      pagination: {
        type: Object,
        default: () => ({}),
      },
    },
    data() {
      return {
        searchForm: {
          title: '',
          maName: '',
          stateId: '',
        },
      }
    },

    created() {
      this.$emit('submit', this.searchForm)
    },
    methods: {
      submitForm() {
        this.$emit('submit', this.searchForm)
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
        this.$emit('submit', this.searchForm)
      },
    },
  }
</script>

<style></style>
